import React, { useState, useEffect } from 'react'
import './App.css';
import axios from './uilt';
import { Button, Modal } from 'antd';

export default function App() {
  let [inp, setinp] = useState('')
  let [list, setlist] = useState([])
  let [list1, setlist1] = useState([])
  let [con, setCon] = useState({})  //再一次拿到list中的数据定义一个变量
  // let [con2,setCon2] = useState({})

  const [isModalOpen, setIsModalOpen] = useState(false);
  let getlist = async () => {
    let { data: { data } } = await axios.get('query')
    setlist(data)
  }
  let getlist1 = async () => {
    let { data: { data } } = await axios.get('xlist')
    console.log(111)
    setlist1(data)
    console.log(data)
  }
  useEffect(() => {
    getlist()
    getlist1()
  }, [])

  let add = async () => {
    await axios.post('xadd', { pid: con._id, title: inp })
  }

  let del = async (_id) => {
    await axios.delete('xdel', {params: { _id } })
    getlist1()
    
  }

  const showModal = (item) => {
    console.log(item, 222)
    setCon(item)
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className='zong'>
      <div className='bu'>
        {list.map((item) => (
          <div key={item._id} >
            <button>{item.name}</button>
            <div className='input'>
              {list1.filter(ele => ele.pid._id === item._id).map((item1) => (
                <div key={item1._id} >
                  <div  onClick={() => { showModal(item) }}>
                    <p>{item1.title}</p>
                    </div>
                </div>
              ))}
            </div>

          </div>
        ))}
      </div>


      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>

        <p>{con.name}</p>
        <p>
          <div>
            {list1.map((item1) => (
              <div key={item1._id} >
                <span>{item1.title}</span>
                <span><button onClick={()=>{del(item1._id)}}>删除</button></span>
                
              </div>
            ))}
          </div>

        </p>
        <p>
          <input type="text" value={inp} onChange={(e) => { setinp(e.target.value) }} />
          <button onClick={add}>添加</button>
        </p>
      </Modal>




    </div>
  )
}
